[CSS] 선택자 :focus-within 알아보기

CSS 선택자 :focus-within에 대하여 알아봅니다. 언제 어떻게 사용할까요?

# CSS 선택자 :focus-widthin

CSS 선택자 중 :focus-within이 존재합니다. :focus-within은 폼 엘리먼트에 사용하며 방문자의 포커스된 엘리먼트에 스타일을 부여할 수 있는 매우 유용한 선택자입니다. 특징으로는 부모 요소에 사용하면 내부 자식 요소에 포커스 된 경우까지 스타일을 쉽게 적용됩니다.

element:focus-in { color: red; }


사용 방법은 다른 선택자 방식과 동일합니다. 엘리먼트에 추가하고 원하는 속성 값을 추가하면 됩니다. 그럼 아래는 간단한 예제를 만들어 보겠습니다.

! :focus-within 예제보기

그럼 간단한 예제를 만들어보고 해당 엘리먼트에 포커스 할 경우 어떻게 스타일이 바뀌는지 알아보도록 하겠습니다. 먼저 form 엘리먼트를 하나 만들고 내부에 간단한 입력폼을 추가합니다.

반드시 폼 태그가 아니더라도 입력 양식인 input, select 등의 태그에 포커스 된다면 위와 같이 div 태그 등 다른 태그도 적용이 가능합니다. 이제 내부 input 태그에 포커스 되는 경우 form 태그의 배경색을 녹색으로 폰트색은 흰색으로 바꿔보도록 하겠습니다.

이제 코드는 모두 완성되었습니다. 실제로 동작하는지 아래에서 구현해보겠습니다.

! 직접 포커스해 확인하기

아래는 위 예제를 구현한 모습입니다. 내부 입력폼에 클릭 또는 이동하여 포커스 해보세요. 스타일이 바뀌는지 확인할 수 있습니다.



배경색과 폰트색이 바뀌었음을 확인할 수 있습니다. 여기까지 css의 :focus-within 선택자를 알아보았습니다.